<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会员信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-input v-model="form_vip.number_vip" size="medium" placeholder="请输入电话号码" clearable class="vip_input" @clear='input_clearNum'></el-input>
      <el-button type="primary" size="medium" class="vip_search" @click="btn_searchvip">查找</el-button>
      <el-button type="primary" size="medium" class="vip_create" @click="dialogCreate=true">添加</el-button>

      <!-- 表格信息 -->
      <el-table :data="tableData_vip" :height="TableHeight " border style="width: 100%" class="table_vip">
        <el-table-column type="index" label="序列" width="50px">
        </el-table-column>
        <el-table-column prop="menber_id" label="会员编号">
        </el-table-column>
        <el-table-column prop="name_vip" label="姓名">
        </el-table-column>
        <el-table-column prop="sex_vip" label="性别">
        </el-table-column>
        <el-table-column prop="number_vip" label="电话">
        </el-table-column>
        <el-table-column prop="staff_vip" label="办理员工">
        </el-table-column>
        <el-table-column prop="createdAt" label="办理时间">
        </el-table-column>
        <el-table-column label="操作" v-if="purview">
          <template slot-scope="scope">
            <el-button @click="vipClick(scope.row)" type="primary" size="small" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" size="small" @click="delevip(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加按钮弹出对话框 -->
      <el-dialog title="添加会员" :visible.sync="dialogCreate" @close="handleClosebtn" @open="handOenBtncreate">
        <el-form ref="formvip" :model="vip_formdialog" label-width="70px">
          <el-form-item label="会员编号" prop="menber_id">
            <el-input disabled v-model="vip_formdialog.menber_id"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name_vip">
            <el-input v-model="vip_formdialog.name_vip"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex_vip">
            <el-input v-model="vip_formdialog.sex_vip"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="number_vip">
            <el-input v-model="vip_formdialog.number_vip"></el-input>
          </el-form-item>
          <el-form-item label="经办人" prop="staff_vip">
            <el-input v-model="vip_formdialog.staff_vip"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogCreate = false">取 消</el-button>
          <el-button type="primary" @click="dialogCreateVip()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改按钮弹出对话框 -->
      <el-dialog title="修改会员信息" :visible.sync="dialogUpdate">
        <el-form ref="tableUpdate" :model="vip_tableUpdate" label-width="80px">
          <el-form-item label="会员编号">
            <el-input disabled v-model="vip_tableUpdate.menber_id"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="vip_tableUpdate.name_vip"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="vip_tableUpdate.sex_vip"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="vip_tableUpdate.number_vip"></el-input>
          </el-form-item>
          <el-form-item label="经办人">
            <el-input v-model="vip_tableUpdate.staff_vip"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdate = false">取 消</el-button>
          <el-button type="primary" @click="dialogUpdateBtn">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CusVip',
  data () {
    return {
      TableHeight: 0,
      form_vip: {
        number_vip: ''
      },
      tableData_vip: [],
      dialogCreate: false,
      dialogUpdate: false,
      // 添加
      vip_formdialog: {
        menber_id: '',
        name_vip: '',
        sex_vip: '',
        number_vip: '',
        staff_vip: ''
      },
      vip_tableUpdate: {
        menber_id: '',
        name_vip: '',
        sex_vip: '',
        number_vip: '',
        staff_vip: ''
      },
      // 表格会员编号最后一个
      tablLasteMenberId: '',
      // 添加信息时的会员编号
      createMenberId: '',
      // 删除请求的参数
      vipDeleteMen: {
        menber_id: ''
      },
      // 权限控制
      purview: '',
      pur: null
    }
  },
  methods: {
    async vipList () {
      const { data: res } = await this.$http.get('vipList')
      this.tableData_vip = res.data
      const lastresult = this.tableData_vip.map(item => item.menber_id)
      this.tablLasteMenberId = lastresult[lastresult.length - 1]
      const numMenber = Number(this.tablLasteMenberId.substring(2, this.tablLasteMenberId.length)) + 1
      const ess = (numMenber + '').split()
      const resu = [String(numMenber)]
      if (ess[0].length < 6) {
        for (let i = 0; i < 6 - ess[0].length; i++) {
          resu.unshift('0')
        }
      }
      this.createMenberId = 'QY' + resu.reduce((pre, cur) => pre + cur)

      // eslint-disable-next-line eqeqeq
      this.pur == 1 ? this.purview = true : this.purview = false
    },
    // 查找按钮
    async btn_searchvip () {
      const { data: res } = await this.$http.get('vipSearch', { params: this.form_vip })
      if (res.meta.status !== 200) return this.$message.error('搜索失败！')
      this.$message.success('搜索成功！')
      this.tableData_vip = res.data
    },
    input_clearNum () {
      this.vipList()
    },
    // 修改按钮
    vipClick (row) {
      this.dialogUpdate = true
      this.vip_tableUpdate = row
    },
    // 修改信息确定按钮回调
    async dialogUpdateBtn () {
      this.$refs.tableUpdate.validate(async vaild => {
        if (!vaild) return
        const { data: res } = await this.$http.post('vipSUpdate', this.vip_tableUpdate)
        if (res.meta.status !== 200) return this.$$message.error('修改失败！')
        this.$message.success('修改成功！')
        this.dialogUpdate = false
        this.vipList()
      })
    },
    // 删除按钮
    async delevip (row) {
      this.vipDeleteMen.menber_id = row.menber_id
      const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      const { data: res } = await this.$http.get('vipDelete', { params: this.vipDeleteMen })
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.vipList()
    },
    // 添加窗口关闭时重置表单
    handleClosebtn () {
      this.$refs.formvip.resetFields()
    },
    // 添加弹出窗口打开时的回调
    handOenBtncreate () {
      this.vip_formdialog.menber_id = this.createMenberId
    },
    // 添加对话框确定时调用
    async dialogCreateVip () {
      this.$refs.formvip.validate(async vaild => {
        if (!vaild) return
        const { data: res } = await this.$http.post('vipCreate', this.vip_formdialog)
        if (res.meta.status !== 200) {
          this.$message.error('添加失败！')
        }
        this.$message.success('添加成功！')
        this.dialogCreate = false
        this.vipList()
      })
    }
  },
  created () {
    this.vipList()
    this.pur = window.localStorage.purview
    // 动态计算表格高度
    const windowHeight = document.documentElement.clientHeight || document.bodyclientHeight
    this.TableHeight = windowHeight - 210// 数值"140"根据需要调整
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin-top: 10px;
  height: calc(100vh - 130px);
}
.vip_input {
  width: 200px;
}
.vip_search {
  margin-left: 10px;
}
.table_vip {
  margin-top: 20px;
}
</style>
